<template>
	<view>
		<view class="icardwidth">
			<!-- <view class="managebutton" @click="show_popup()" v-if="collectinfo.length!=0"
				:style="{'color':(showpopup?'rgba(255, 87, 51, 1)':'rgba(112, 112, 112, 1)')}">{{showpopup?'完成':'管理'}}
			</view> -->
			<view class="chooseBox">
				<u-subsection :list="subsection_list" :current="curNow" buttonColor="#ffffff" bg-color="#ffffff"
					active-color="rgba(255, 87, 51, 1)" inactive-color="#808080" height="78" @change="setlistChange()">
				</u-subsection>
			</view>
			<u-swipe-action v-for="(item, index) in collectinfo" :index="index" :key="item.colUuid" :show="item.show"
				@open="open" @click="click" :options="options">
				<collectcard :details="item" v-if="curNow == 0"></collectcard>
				<needcollectcard :details="item" v-if="curNow == 1"></needcollectcard>
			</u-swipe-action>
		</view>
		<!-- <view class="delete" style="z-index: 999;">
			<button class="deletebutton" @click="cancelcollect()">取消收藏</button>
		</view> -->
		<u-back-top :scroll-top="scrollTop" mode="square" tips="顶部"></u-back-top>
		<u-divider v-if="inbottom" color="#878787" bg-color="#f5f5f5" margin-top="60" margin-bottom="60">到底了</u-divider>
		<!-- 底部适配 -->
		<view class="adaptation"></view>
	</view>
</template>
<script>
	import needcollectcard from '../../components/collectcard/needcollectcard.vue'
	import collectcard from '../../components/collectcard/collectcard.vue'
	export default {
		components: {
			collectcard,
			needcollectcard
		},
		data() {
			return {
				//回到顶部
				pageNumber: 0,
				scrollTop: 0,
				pagenum: 0,
				curNow: 0,
				pageSize: 10,
				inbottom: false,
				showpopup: false,
				collectinfo: [],
				show: false,
				options: [{
					text: '取消收藏',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				subsection_list: [{
						name: '商品' //0,1
					},
					{
						name: '需求' //2
					}
				],
			}
		},
		methods: {
			click(index, index1) {
				let uuid = this.collectinfo[index].thingUUId
				this.cancelcollect(uuid).then(res=>{
					if (res.data.code == 200 ){
						this.collectinfo.splice(index, 1);
					}
				})
				// console.log(issuc)
				// this.list.splice(index, 1);
				// this.getcollectgoodsinfo();
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.collectinfo[index].show = true;
				this.collectinfo.map((val, idx) => {
					if (index != idx) this.collectinfo[idx].show = false;
				})
			},
			// icardchooseall() { //点击选择
			// 	this.chooseall = !this.chooseall;
			// },
			// show_popup() { //显示管理界面
			// 	this.showpopup = !this.showpopup;
			// },
			pushlist(list) {
				for (let i = 0; i < list.length; i++) {
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(list[i]))
					// item.id = this.$u.guid();
					this.collectinfo.push(item);
				}
			},
			//页面跳转
			goto(url) {
				uni.navigateTo({
					url: url,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
			setlistChange(index) {
				this.curNow = index;
				if (this.collectinfo.length == 0) {
					this.getcollectgoodsinfo();
					this.getcollectneedgoodsinfo();
				}
			},
			cancelcollect(uuid) { //取消收藏
				let iurl = '/store/cancelStore';
				let data = {
					thingUUId: uuid,
				};
				return this.$myRequest({
					url: iurl,
					method: 'POST',
					data: data,
				})
			},
			//查询商品
			async getcollectgoodsinfo() {
				const res = await this.$myRequest({
					url: '/store/findMyStoreGoodsList',
					method: 'POST',
					data: {
						'pageNum': this.pageNumber,
						'pageSize': 7,
						'show': this.show,
					},
				}).then(res => {
					if (res.data.code === 200) {
						if (res.data.data.length === 0) {
							this.inbottom = true;
							return 0;
						}
						let show = res.data.data;
						show.map((item) => {
							item.show = '';
							return item
						})
						this.pushlist(res.data.data);
					} else {
						uni.showToast({
							title: '数据获取失败',
							icon: 'error',
							duration: 2000,
						})
					}
				})
			},
			//查询需求
			async getcollectneedgoodsinfo() {
				let aurl = '/store/findMyStoreDemandList'
				const res = await this.$myRequest({
					url: aurl,
					method: 'POST',
					data: {
						'pageNum': this.pageNumber,
						'pageSize': 7,
						'show': this.show,
					},
				}).then(res => {
					if (res.data.code === 200) {
						if (res.data.data.length === 0) {
							this.inbottom = true;
							return 0;
						}
						let show = res.data.data;
						show.map((item) => {
							item.show = '';
							return item
						})
						this.pushlist(res.data.data);
					} else {
						uni.showToast({
							title: '数据获取失败',
							icon: 'error',
							duration: 2000,
						})
					}
				})
			},
		},
		onLoad() {
			this.getcollectgoodsinfo();
			this.getcollectneedgoodsinfo();
		},
		onPageScroll(e) { //页面滚动
			this.scrollTop = e.scrollTop
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.collectinfo = [];
			this.getcollectgoodsinfo();
			this.getcollectneedgoodsinfo();
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 500);
		},
		onReachBottom() { //到达底部
			this.getcollectgoodsinfo();
			this.getcollectneedgoodsinfo();
		},
	}
</script>

<style>
	@import url("mycollect.css");
</style>
